এসভিজি (Scalable Vector Graphics) ফরম্যাটে গ্রাফিক্সের চিত্র তৈরি করতে নানা ধরনের এট্রিবিউট ব্যবহার করা হয়। এর মধ্যে Fill, Stroke, এবং Stroke-width তিনটি গুরুত্বপূর্ণ এট্রিবিউট যা চিত্রের রঙ, বর্ডার, এবং প্রস্থ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এই তিনটি এট্রিবিউটের সাহায্যে আপনি গ্রাফিক্সের স্টাইল কাস্টমাইজ করতে পারেন।
Fill এট্রিবিউট
Fill এট্রিবিউটটি এসভিজি উপাদানের ভেতরের অংশের রঙ নির্ধারণ করে। এটি মূলত চিত্রের পটভূমি বা পূর্ণ অংশের রঙ কনফিগার করে।
ব্যবহার:
fillদিয়ে আপনি গ্রাফিক্যাল উপাদানের ভেতরের রঙ নির্বাচন করতে পারেন।- আপনি এখানে সিএসএস রঙের নাম, হেক্সাডেসিমাল রঙ, RGB, RGBA ইত্যাদি ব্যবহার করতে পারেন।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
এখানে, <circle> উপাদানের ভেতরের অংশটি লাল (red) রঙে পূর্ণ হবে।
Stroke এট্রিবিউট
Stroke এট্রিবিউটটি এসভিজি উপাদানের প্রান্ত বা বর্ডারের রঙ নির্ধারণ করে। এটি একটি রেখার বা আকৃতির বাইরের সীমারেখার রঙ চয়েস করতে ব্যবহৃত হয়।
ব্যবহার:
strokeদিয়ে আপনি যে কোনো গ্রাফিক্যাল উপাদানের প্রান্তের রঙ নির্ধারণ করতে পারেন।- এই এট্রিবিউটেও আপনি সিএসএস রঙের নাম, হেক্সাডেসিমাল রঙ, RGB, RGBA ইত্যাদি ব্যবহার করতে পারেন।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="yellow" stroke="black" />
</svg>
এখানে, <circle> এর ভেতরের অংশটি হলুদ (yellow) রঙে পূর্ণ হবে এবং বর্ডার হবে কালো (black)।
Stroke-width এট্রিবিউট
Stroke-width এট্রিবিউটটি এসভিজি উপাদানের প্রান্তের প্রস্থ নির্ধারণ করে। এটি ব্যবহার করে আপনি একটি রেখার বা আকৃতির বর্ডারের প্রস্থ নির্ধারণ করতে পারেন।
ব্যবহার:
stroke-widthদিয়ে আপনি বর্ডারের প্রস্থ বা thickness নিয়ন্ত্রণ করতে পারেন। এটি পিক্সেলে নির্ধারিত হয়।- এর মান সাধারণত একটি সাঙ্ঘাতিক সংখ্যা (যেমন
2,5,10, ইত্যাদি) হিসেবে দেওয়া হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="green" stroke="black" stroke-width="4" />
</svg>
এখানে, <circle> এর প্রান্তের প্রস্থ হবে ৪ পিক্সেল (4px), এবং বর্ডারের রঙ হবে কালো (black)।
একসাথে Fill, Stroke, এবং Stroke-width এর ব্যবহার
এই তিনটি এট্রিবিউট একসাথে ব্যবহার করে আপনি একটি গ্রাফিক্সের ভেতরের রঙ, বাইরের বর্ডার রঙ এবং বর্ডারের প্রস্থ কাস্টমাইজ করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে তিনটি এট্রিবিউট একসাথে ব্যবহার করা হয়েছে:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="blue" stroke="red" stroke-width="5" />
</svg>
এখানে:
<rect>উপাদানের ভেতরের অংশ নীল (blue) রঙে পূর্ণ হবে।- প্রান্তের রঙ হবে লাল (red) এবং প্রস্থ হবে ৫ পিক্সেল (5px)।
সারাংশ
- Fill: এসভিজি উপাদানের ভেতরের রঙ নির্ধারণ করে।
- Stroke: এসভিজি উপাদানের বাইরের প্রান্তের রঙ নির্ধারণ করে।
- Stroke-width: এসভিজি উপাদানের প্রান্তের প্রস্থ বা thickness নির্ধারণ করে।
এসভিজি চিত্রে এই তিনটি এট্রিবিউট ব্যবহার করে আপনি চিত্রের স্টাইল অত্যন্ত কাস্টমাইজডভাবে তৈরি করতে পারবেন, যা ডিজাইনে খুবই কার্যকর।
Read more
